<template>
  <div>
    <h2>父组件：</h2>
    <div>msg： {{ msg }}</div>
    <el-button type="primary" @click="handleChangeSelfMsg">父组件修改自己的值</el-button>

    <br>
    <br />
    <hr />
    <br />
    <Child></Child>
  </div>
</template>
<script setup lang="ts">
import Child from '@views/communication/07_provide-inject/Child.vue'

const msg = ref('我是父组件的消息')
const info = reactive({
  name: '张三',
  age: 18,
  address: '北京上下屋',
})
// 给子组件使用的
const updateMsg = (val: string) => {
  msg.value += val
}

// 自己调用
const handleChangeSelfMsg = () => {
  msg.value += '￥'
}
provide('userMsg', msg) // 这里不是msg.value。因为后续需要响应式的。
provide('userMsgObj', { msg, updateMsg })
provide('userInfo', info)
</script>
<style scoped></style>
